<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../assets/css/randomuser.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <title> Random User</title>
</head>

<body id="Body-random">

    <div class="container-md content">
        <h1 class="mt-2"> Random User Finder</h1>
        <div class="container-md p-1  mt-4 mb-4" id="Random_User">
            <div class="container-fluid mb-4 img" id="img"> </div>
            <div class="container" id="User-Data">
                <div class="row g-2">
                    <div class="col-6">
                        <div class="p-2 border bg-light">
                            <label for="User-Name">Name</label>
                            <p id="name"> </p>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="p-2 border bg-light">
                            <label for="Country"> Country_Name</label>
                            <p id="country"> </p>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="p-2 border bg-light">
                            <label for="City"> City</label>
                            <p id="city"> </p>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="p-2 border bg-light">
                            <label for="DOB"> DOB</label>
                            <p id="DOB"> </p>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="p-2 border bg-light">
                            <label for="Age">Age</label>
                            <p id="Age"></p>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="p-2 border bg-light">
                            <label for="Age">Gender</label>
                            <p id="Gender"></p>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="p-2 border bg-light">
                            <label for="Email-Address">Email-Address</label>
                            <p id="Email"></p>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="p-2 mb-4 border bg-light">
                            <label for="Number">Phone Number</label>
                            <p id="number"></p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="d-grid gap-2">
                <button class="btn btn-primary mb-2 p-3" id="btn" type="button">Press </button>
            </div>
        </div>

    </div>


    <script src="../assets/js/randomuser.js"></script>
</body>

</html>